<template>
	<view class="indexs">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_yunfeigusuan.shipping_estimate') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom:130rpx;'">
			<view class="yunfeigusuan_center">
				<view class="shenqingdb_item1">
					<view class="shenqingdb_item1_txt">
						<image :src="imgUrl + '/dzx_img34.png'"></image>
						<text style="flex:1">{{ $t('page_yunfeigusuan.hintText') }}</text>
					</view>
				</view>
				<view class="yunfeigusuan_item1">
					<!--  @tap="guojiatz" -->
					<view class="yunfeigusuan_item1_title">
						<view class="yunfeigusuan_item1_l">
							<image :src="imgUrl + '/dzx_img23.png'"></image>
							<text>{{ $t('page_yunfeigusuan.receiving_area') }}</text>
						</view>
						<view class="yunfeigusuan_item1_r">
							<text>{{ guojianame }}</text>
							<!-- <image :src="imgUrl + '/dzx_img25.png'"></image> -->
						</view>
					</view>
					<view class="yunfeigusuan_item1_title">
						<view class="yunfeigusuan_item1_l">
							<image :src="imgUrl + '/dzx_img26.png'"></image>
							<text>{{ $t('page_yunfeigusuan.unit_charging') }}</text>
						</view>
						<view class="yunfeigusuan_item1_r">
							<text>{{ jifeifangshi[indexkd] }}</text>
							<!-- <image :src="imgUrl + '/dzx_img25.png'"></image> -->
						</view>
						<!-- <picker @change="bindKuaidiChange" :value="index" :range="jifeifangshi">
							
						</picker> -->
					</view>
					<!-- <view class="yunfeigusuan_item1_title">
						<view class="yunfeigusuan_item1_l">
							<image :src="imgUrl + '/dzx_img26.png'"></image>
							<text>{{ $t('page_yunfeigusuan.linecategory') }}</text>
						</view>
						<view class="yunfeigusuan_item1_r">
							<text>{{$t('page_other.陆运')}}</text>
						</view>
						<picker @change="linecategoryChange" :value="linecategoryindex" :range="linecategorylist">
							<view class="yunfeigusuan_item1_r">
								<text>{{ linecategorylist[linecategoryindex] }}</text>
								<image :src="imgUrl + '/dzx_img25.png'"></image>
							</view>
						</picker>
					</view> -->
					<view class="yunfeigusuan_item1_title" style="border-top: 1px solid #efefef">
						<view class="yunfeigusuan_item1_l">
							<image :src="imgUrl + '/dzx_img40.png'"></image>
							<!-- <text>{{ $t('page_yunfeigusuan.pack') }}{{ jifeifangshi[indexkd] }}({{ jifeifangshi[indexkd] == $t('page_other.立方') ? 'CBM' : weight_mode.unit }})</text> -->
							<text>{{ jifeifangshi[indexkd] }}({{ jifeifangshi[indexkd] == $t('page_other.立方') ? 'CBM' : weight_mode.unit }})</text>
						</view>
						<view class="yunfeigusuan_item1_r">
							<input type="digit" :placeholder="$t('page_yunfeigusuan.please_enter_the_package') + jifeifangshi[indexkd]" @input="zhongliangFun" />
						</view>
					</view>
					
				</view>
				<view class="yunfeigusuan_item2" >
					<view class="yunfeigusuan_item1_title" v-if="indexkd==0">
						<view class="yunfeigusuan_item1_l">
							<image style="width: 40rpx; height: 42rpx" :src="imgUrl + '/dzx_img41.png'"></image>
							<text>{{ $t('page_yunfeigusuan.cargo_size') }}</text>
							<view class="yunfeigusuan_item2_t1">({{ $t('page_yunfeigusuan.optional_input_size') }})</view>
						</view>
					</view>
					<view class="yunfeigusuan_item2_list" v-if="indexkd==0">
						<view class="yunfeigusuan_item2_cont">
							<input type="digit" :placeholder="$t('page_yunfeigusuan.long') + '(' + setting.size_mode.unit + ')'" @input="changFun" />
						</view>
						<view class="yunfeigusuan_item2_cont">
							<input type="digit" :placeholder="$t('page_yunfeigusuan.width') + '(' + setting.size_mode.unit + ')'" @input="kuanFun" />
						</view>
						<view class="yunfeigusuan_item2_cont">
							<input type="digit" :placeholder="$t('page_yunfeigusuan.height') + '(' + setting.size_mode.unit + ')'" @input="gaoFun" />
						</view>
					</view>
					<!-- <view class="yunfeigusuan_item1_title" style="border-top: 1px solid #efefef" @tap="shangpinpinlei" v-if="is_categorysearch == 1">
						<view class="yunfeigusuan_item1_l">
							<image :src="imgUrl + '/dzx_img28.png'"></image>
							<text>{{ $t('page_yunfeigusuan.item_category') }}</text>
						</view>
						<view class="yunfeigusuan_item1_r">
							<text>{{ shangpinnames }}</text>
							<image :src="imgUrl + '/dzx_img25.png'"></image>
						</view>
					</view> -->
					<view class="yunfeigusuan_item1_l_title" style="border-top: 1px solid #efefef; margin-bottom: 120px" v-if="setting.is_service == 1">
						<view class="yunfeigusuan_item1_l">
							<image :src="imgUrl + '/dzx_img28.png'"></image>
							<text>{{ setting.service_othername }}</text>
						</view>
						<view class="my_querendb_item2_txts">
							<view class="my_querendb_item2_wenben">{{ setting.service_des }}</view>
							<view class="my_querendb_item2_txtlist">
								<view class="my_querendb_item2_txtcont" @tap="gouxuanze" :data-id="item.id" :data-index="index" v-for="(item, index) in baozhuanglist" :key="index">
									<image :src="imgUrl + (item.is_show ? 'dzx_img167' : 'dzx_img166') + '.png'"></image>

									<view class="my_querendb_item2_txtcont_t1">
										{{ item.name }}(
										<text>{{ item.type == 0 ? item.price : item.percentage }}{{ item.type == 0 ? setting.price_mode.unit : '%' }}</text>
										-
										<text>{{ item.type == 0 ? $t('page_yunfeigusuan.fixed_amount') : $t('page_yunfeigusuan.freight_ratio') }}</text>
										)-{{ item.service_des }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="baoguo_btns">
					<view class="baoguo_btns_posi">
						<view class="baoguo_btn" @tap="chaxunjieguo">{{ $t('page_yunfeigusuan.inquireNow') }}</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar :showmenu="menu_type" current="3"></tabbar>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');
import tabbar from '@/components/tabbar/tabbar.vue';
export default {
	components: {
		tabbar
	},
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			menu_type: uni.getStorageSync('menu_type'),
			guojiaid: '',
			guojianame:this.$t('page_other.选择收货地区'),
			shangpinids: '',
			shangpinnames: this.$t('page_other.请选择物品品类'),
			zhongliang: '',
			is_categorysearch: uni.getStorageSync('is_categorysearch'),
			jifeifangshi: [],
			linecategorylist:[this.$t('page_other.不限'),this.$t('page_other.海运'),this.$t('page_other.空运'),this.$t('page_other.陆运'),this.$t('page_other.铁运')],
			linecategory:30,
			indexkd: 0,
			linecategoryindex:3,
			baozhuanglist: [],
			current: [],
			// volume:'',
			tiji: '',
			chang: '',
			kuan: '',
			gao: '',
			weight_mode: uni.getStorageSync('weight_mode'),
			setting: uni.getStorageSync('setting')
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad() {
		var that = this;
		that.getCountryName();
	},
	onShow() {
		this.jifeifangshi=[this.$t('page_other.重量'),this.$t('page_other.立方')]
		var that = this;
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];

		if (currPage.guojiaid) {
			this.guojiaid = currPage.guojiaid
			this.guojianame = currPage.guojianame
		}
		if (currPage.ids) {
			this.shangpinids = currPage.ids//返回商品品类
			this.shangpinnames = currPage.names //返回商品品类
		}
		that.current = [];
		that.baozhuang();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {
		var thisUserInfo = uni.getStorageSync('userInfo');
		var sett =  uni.getStorageSync('setting');
		var shareObj = {
			title: sett.name,
			desc: sett.desc,
			// 默认是小程序的名称(可以写SOGO express集运等)
			path: '/pages/indexs/yunfeigusuan/yunfeigusuan?scene=uid%3A' + thisUserInfo.user_id,
			// 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: '',
			//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
			fail: function() {
				// 转发失败之后的回调
				if (res.errMsg == 'shareAppMessage:fail cancel') {
					// 用户取消转发
				} else {
					if (res.errMsg == 'shareAppMessage:fail') {
					}
				}
			}
		};
		return shareObj;
	},
	methods: {
		getCountryName() {
			var that = this;
			// var data = {
			// 	token: uni.getStorageSync('token')
			// };
			var data = {
				keyword: ''
			};
			request.get(`index.php?s=/api/package/country&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					console.log(res.data.data.热门[0], 're?????');
					if(res.data.data.热门.length>0){
						this.guojiaid = res.data.data.热门[0].id
						this.guojianame = res.data.data.热门[0].title
					}else{
						this.guojiaid = uni.getStorageSync('country')['id']
						this.guojianame = uni.getStorageSync('country')['title']
					}
				}
			});
			// request.post(`index.php?s=/api/package/getCountryName&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
			// 	if (res.data.code == 1) {
			// 		var model = res.data.data;
			// 		console.log(res.data.data)
			// 		if(model){
			// 			this.guojiaid = model.country_id
			// 			this.guojianame = model.country
			// 		}else{
			// 			this.guojiaid = uni.getStorageSync('country')['id']
			// 			this.guojianame = uni.getStorageSync('country')['title']
			// 		}
					
			// 		console.log(that.guojiaid, 87654);
			// 	}
			// });
		},
		//勾选包装
		gouxuanze(e) {
			var that = this;
			var baozhuanglist = that.baozhuanglist;
			var current = that.current;

			if (baozhuanglist[e.currentTarget.dataset.index].is_show) {
				baozhuanglist[e.currentTarget.dataset.index].is_show = false;

				for (var i = 0; i < current.length; i++) {
					if (e.currentTarget.dataset.id == current[i]) {
						current.splice(i, 1);
					}
				}
			} else {
				baozhuanglist[e.currentTarget.dataset.index].is_show = true;
				current.push(e.currentTarget.dataset.id);
			}

			that.current = current
			that.baozhuanglist = baozhuanglist
			console.log(current, '?current');
		},
		//包装服务
		baozhuang() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/package/postservice&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					console.log(res, 'add');
					that.baozhuanglist = res.data.data
				}
			});
		},
		zhongliangFun(e) {
			this.zhongliang = e.detail.value
		},
		tijiFun(e) {
			console.log(e.detail.value);
			this.volume = e.detail.value
		},

		changFun(e) {
			this.chang = e.detail.value
		},

		kuanFun(e) {
			this.kuan = e.detail.value
		},

		gaoFun(e) {
			this.gao = e.detail.value
		},

		//商品品类
		shangpinpinlei() {
			uni.navigateTo({
				url: '/pages/indexs/shangpinpinlei/shangpinpinlei'
			});
		},

		//选择快递
		bindKuaidiChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.indexkd = e.detail.value
		},
		
		linecategoryChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.linecategoryindex = e.detail.value
			if(this.linecategoryindex==0){
				this.linecategory= 0;
			}
			if(this.linecategoryindex==1){
				this.linecategory=10;
			}
			if(this.linecategoryindex==2){
				this.linecategory=20;
			}
			if(this.linecategoryindex==3){
				this.linecategory=30;
			}
			if(this.linecategoryindex==4){
				this.linecategory=40;
			}
		},

		//选择国家
		guojiatz() {
			uni.navigateTo({
				url: '/pages/indexs/baoguoyg_guojia/baoguoyg_guojia'
			});
		},

		chaxunjieguo() {
			var that = this;
			var data = {
				length: that.chang,
				width: that.kuan,
				height: that.gao,
				weigth: that.zhongliang,
				volume: that.volume,
				freeType: that.indexkd,
				country_id: that.guojiaid,
				linecategory:that.linecategory,
				class_ids: that.shangpinids,
				guojianame: that.guojianame,
				service: that.current.join(',')
			};
			console.log(data, 56);
			if (data.country_id == '') {
				uni.showToast({
					title:that.$t('page_other.选择收货地区'),
					icon: 'none'
				});
				return;
			}

			if (data.weigth == '' && data.length == '' && data.width == '' && data.height == '') {
				console.log(6666);
				uni.showToast({
					title:that.$t('page_other.重量或长宽高必填其一'),
					icon: 'none'
				});
				return;
			}
			//跳转查询
			uni.navigateTo({
				url: '/pages/indexs/chaxunjieguo/chaxunjieguo?data=' + JSON.stringify(data)
			});
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './yunfeigusuan.css';
</style>
